<template>
  <el-dialog
    title="参数详情"
    v-model="state.dialogVisible"
    width="50%"
    :before-close="dialogBeforeClose"
  >
    <div class="bottom">
      <!-- <div class="bianhao">
        <div class="tit">单元编码</div>
        <div class="list">
          <div
            v-for="(item, index) in state.inUnitInfos"
            :key="index"
            :class="['list-item', state.showModelParaIndex == index ? 'active' : '']"
            @click="handleClicModelPara(item, index)"
          >
            <el-tooltip class="box-item" effect="dark" :content="item.unitcd" placement="top-start">
              <div>{{ item.unitcd }}</div>
            </el-tooltip>
          </div>
        </div>
      </div> -->
      <div class="table">
        <div class="btn">
          <div class="model">
            <span>计算单元计算参数：</span>
            <!-- <el-input type="text" v-model="state.paramsName" class="in"></el-input> -->
            <span class="a-title">{{ state.paramsName || '--' }}</span>

            <!-- <el-button type="primary">导入参数文件</el-button> -->
            <!-- <input
                      type="file"
                      id="files"
                      ref="refFile"
                      v-on:change="importCsv"
                      accept=".csv"
                    />-->
          </div>
        </div>
        <div class="table-tb">
          <el-tabs type="border-card" v-model="state.activeNameThird">
            <el-tab-pane label="小流域计算参数" name="first">
              <el-table
                size="small"
                border
                :data="state.paramsFirst"
                style="width: 100%"
                height="100%"
              >
                <el-table-column
                  prop="wscd"
                  label="小流域编码"
                  show-overflow-tooltip
                  align="center"
                />
                <el-table-column
                  prop="hruArea"
                  label="小流域单元面积"
                  show-overflow-tooltip
                  align="center"
                  width="200"
                />
                <el-table-column
                  prop="hruElev"
                  label="小流域单元平均高程（米）"
                  show-overflow-tooltip
                  align="center"
                  width="200"
                />
                <el-table-column
                  prop="soilType"
                  label="小流域单元主要土壤类型"
                  show-overflow-tooltip
                  align="center"
                  width="200"
                />
                <!-- <el-table-column prop="wsnm" label="小流域名称" show-overflow-tooltip align="center" /> -->
                <el-table-column
                  prop="impervStorMax"
                  label="洼地平均蓄水量[mm]"
                  show-overflow-tooltip
                  align="center"
                  width="200"
                />
                <el-table-column
                  prop="covdenSum"
                  label="夏季植被覆盖密度[%]"
                  show-overflow-tooltip
                  align="center"
                  width="200"
                />
                <el-table-column
                  prop="srainIntcp"
                  label="夏季主要植被类型的截流能力[mm]"
                  show-overflow-tooltip
                  align="center"
                  width="300"
                />
                <el-table-column
                  prop="covdenWin"
                  label="冬季植被覆盖密度[%]"
                  show-overflow-tooltip
                  align="center"
                  width="200"
                />
                <el-table-column
                  prop="snowIntcp"
                  label="冬季主要植被类型的截流能力[mm]"
                  show-overflow-tooltip
                  align="center"
                  width="300"
                />
                <!--  -->
                <el-table-column
                  prop="hruGenType"
                  label="响应单元编号"
                  show-overflow-tooltip
                  align="center"
                  width="100"
                />
                <el-table-column
                  prop="soil2gwMax"
                  label="土壤向地下水渗漏系数"
                  show-overflow-tooltip
                  align="center"
                  width="200"
                />
                <el-table-column
                  prop="slowcoefLin"
                  label="慢速壤中流线性系数"
                  show-overflow-tooltip
                  align="center"
                  width="200"
                />
                <el-table-column
                  prop="slowcoefSq"
                  label="慢速壤中流非线性系数"
                  show-overflow-tooltip
                  align="center"
                  width="300"
                />
                <el-table-column
                  prop="prefFlowDen"
                  label="土壤区用于地下水优先流的水分比例"
                  show-overflow-tooltip
                  align="center"
                  width="300"
                />
                <el-table-column
                  prop="fastcoefLin"
                  label="快速壤中流线性系数"
                  show-overflow-tooltip
                  align="center"
                  width="200"
                />
                <el-table-column
                  prop="fastcoefSq"
                  label="快速壤中流非线性系数"
                  show-overflow-tooltip
                  align="center"
                  width="200"
                />
                <el-table-column
                  prop="conductivity"
                  label="饱和水力传导度"
                  show-overflow-tooltip
                  align="center"
                  width="200"
                />
                <el-table-column
                  prop="porosity"
                  label="孔隙率"
                  show-overflow-tooltip
                  align="center"
                />
                <el-table-column
                  prop="residualSaturation"
                  label="残余含水量"
                  show-overflow-tooltip
                  align="center"
                  width="150"
                />
                <el-table-column
                  prop="vgAlpha"
                  label="VG模型alpha"
                  show-overflow-tooltip
                  align="center"
                  width="150"
                />
                <el-table-column
                  prop="vgN"
                  label="VG模型n"
                  show-overflow-tooltip
                  align="center"
                  width="150"
                />
                <el-table-column
                  prop="layerTopDepth"
                  label="上层土壤厚度"
                  show-overflow-tooltip
                  align="center"
                  width="150"
                />
                <el-table-column
                  prop="layerDepth"
                  label="土壤厚度"
                  show-overflow-tooltip
                  align="center"
                  width="150"
                />
                <el-table-column
                  prop="initialWaterContent"
                  label="初始土壤含水率"
                  show-overflow-tooltip
                  align="center"
                  width="150"
                />
                <el-table-column
                  prop="fieldCapacity"
                  label="田间持水量"
                  show-overflow-tooltip
                  align="center"
                  width="150"
                />
                <el-table-column
                  prop="dprstDepth"
                  label="dprst厚度"
                  show-overflow-tooltip
                  align="center"
                  width="150"
                />
                <el-table-column
                  prop="dprstStorageInit"
                  label="dprst初始流量"
                  show-overflow-tooltip
                  align="center"
                  width="150"
                />
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="河道计算参数" name="second">
              <el-table
                size="small"
                border
                :data="state.paramsSecond"
                style="width: 100%"
                height="100%"
              >
                <el-table-column
                  prop="rvcd"
                  label="河段编码"
                  show-overflow-tooltip
                  align="center"
                />
                <el-table-column
                  prop="chanAlpha"
                  label="运动波参数α"
                  show-overflow-tooltip
                  align="center"
                  width="150"
                />
                <el-table-column
                  prop="chanCmp"
                  label="运动波参数m"
                  show-overflow-tooltip
                  align="center"
                  width="150"
                />
                <el-table-column
                  prop="chanLength"
                  label="河段长度"
                  show-overflow-tooltip
                  align="center"
                />
                <el-table-column
                  prop="chanNdx"
                  label="坡面汇流参数"
                  show-overflow-tooltip
                  align="center"
                  width="150"
                />
                <el-table-column
                  prop="chanRough"
                  label="曼宁系数"
                  show-overflow-tooltip
                  align="center"
                />
                <!-- <el-table-column prop="wsnm" label="小流域名称" show-overflow-tooltip align="center" /> -->
                <el-table-column
                  prop="chanRouteTime"
                  label="运动波系数演进时间"
                  show-overflow-tooltip
                  align="center"
                  width="200"
                />
                <el-table-column
                  prop="chanSlope"
                  label="河底比降"
                  show-overflow-tooltip
                  align="center"
                />
                <el-table-column
                  prop="chanT3Lbratio"
                  label="左岸系数"
                  show-overflow-tooltip
                  align="center"
                />
                <el-table-column
                  prop="chanT3Rbratio"
                  label="右岸系数"
                  show-overflow-tooltip
                  align="center"
                />
                <el-table-column
                  prop="chanThresh"
                  label="河段运动波系数thresh"
                  show-overflow-tooltip
                  align="center"
                  width="200"
                />
                <!--  -->
                <!-- <el-table-column
                          prop="chanType"
                          label="河段类型"
                          show-overflow-tooltip
                          align="center"
                        /> -->
                <el-table-column
                  prop="chanWidth"
                  label="河宽"
                  show-overflow-tooltip
                  align="center"
                />

                <el-table-column
                  prop="resInit"
                  label="水库的汇流参数-水库初始蓄水量"
                  show-overflow-tooltip
                  align="center"
                  width="200"
                />
                <el-table-column
                  prop="resLow"
                  label="水库的汇流参数-死库容"
                  show-overflow-tooltip
                  align="center"
                  width="200"
                />
                <el-table-column
                  prop="resUp"
                  label="水库的汇流参数-最大库容"
                  show-overflow-tooltip
                  align="center"
                  width="200"
                />
                <el-table-column
                  prop="chanQInit"
                  label="河道初始流量"
                  show-overflow-tooltip
                  align="center"
                  width="150"
                />
                <el-table-column
                  prop="lag"
                  label="滞后时间"
                  show-overflow-tooltip
                  align="center"
                /> </el-table
            ></el-tab-pane>
            <el-tab-pane label="运动波参数" name="third">
              <el-table
                size="small"
                border
                :data="state.paramsThird"
                style="width: 100%"
                height="100%"
              >
                <el-table-column
                  prop="wscd"
                  label="小流域编码"
                  show-overflow-tooltip
                  align="center"
                />
                <el-table-column
                  prop="ofpAlpha"
                  label="运动波坡面汇流参数α"
                  show-overflow-tooltip
                  align="center"
                  width="200"
                />
                <el-table-column
                  prop="ofpCmp"
                  label="运动波坡面汇流参数m"
                  show-overflow-tooltip
                  align="center"
                  width="200"
                />
                <el-table-column
                  prop="ofpHru"
                  label="汇流坡面对应的hru计算单元"
                  show-overflow-tooltip
                  align="center"
                  width="200"
                />
                <el-table-column
                  prop="ofpImpareaPercent"
                  label="坡面不透水面积百分比"
                  show-overflow-tooltip
                  align="center"
                  width="200"
                />
                <el-table-column
                  prop="ofpImpvAlpha"
                  label="坡面不透水面积的运动波汇流参数α"
                  show-overflow-tooltip
                  align="center"
                  width="250"
                />
                <el-table-column
                  prop="ofpImpvCmp"
                  label="坡面不透水面积的运动波汇流参数m"
                  show-overflow-tooltip
                  align="center"
                  width="250"
                />
                <el-table-column
                  prop="ofpLength"
                  label="运动波汇流长度"
                  show-overflow-tooltip
                  align="center"
                  width="200"
                />
                <el-table-column
                  prop="ofpNdx"
                  label="是否有坡面汇流"
                  show-overflow-tooltip
                  align="center"
                  width="150"
                />
                <el-table-column
                  prop="ofpRough"
                  label="运动波系数rough"
                  show-overflow-tooltip
                  align="center"
                  width="150"
                />
                <!-- <el-table-column prop="wsnm" label="小流域名称" show-overflow-tooltip align="center" /> -->
                <el-table-column
                  prop="ofpRouteTime"
                  label="运动波系数演进时间"
                  show-overflow-tooltip
                  align="center"
                  width="200"
                />
                <el-table-column
                  prop="ofpSlope"
                  label="运动波系数坡度"
                  show-overflow-tooltip
                  align="center"
                  width="150"
                />
                <el-table-column
                  prop="ofpThresh"
                  label="运动波系数thresh"
                  show-overflow-tooltip
                  align="center"
                  width="150"
                />
                <el-table-column
                  prop="ofpType"
                  label="运动波系数坡面类型"
                  show-overflow-tooltip
                  align="center"
                  width="200"
                />
                <el-table-column
                  prop="tb"
                  label="运动波系数Tb"
                  show-overflow-tooltip
                  align="center"
                  width="150"
                />
                <el-table-column
                  prop="tp"
                  label="运动波系数Tp"
                  show-overflow-tooltip
                  align="center"
                  width="150"
                />
                <!--  -->
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="地下水库参数" name="fourth">
              <el-table
                size="small"
                border
                :data="state.paramsFourth"
                style="width: 100%"
                height="100%"
              >
                <el-table-column
                  prop="wscd"
                  label="小流域编码"
                  show-overflow-tooltip
                  align="center"
                />
                <el-table-column
                  prop="gwflowCoef"
                  label="产流系数"
                  show-overflow-tooltip
                  align="center"
                />
                <el-table-column
                  prop="gwsinkCoef"
                  label="渗漏系数"
                  show-overflow-tooltip
                  align="center"
                />
                <el-table-column
                  prop="gwstorInit"
                  label="初始含水量"
                  show-overflow-tooltip
                  align="center"
                /> </el-table
            ></el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<script setup>
import { reactive, defineExpose } from 'vue'
import {
  getSkbyCalUnits,
  // 查询时空变源参数信息
  getSkbyParams,
  // 查看时空变源-流域参数
  getParamsWata,
  // 查看时空变源-河道参数
  getParamsRiver,
  // 查看时空变源-运动波参数
  getParamsNofpl,
  // 查看时空变源-地下水库参数
  getParamsNgw
} from '@/services/modules/model-config'
const state = reactive({
  // 控制弹框显隐
  dialogVisible: false,
  // 选中的状态
  showModelParaIndex: '',
  // 计算单元列表
  inUnitInfos: [],
  // 小流域计算参数
  paramsFirst: [],
  // 河道计算参数
  paramsSecond: [],
  // 运动波参数
  paramsThird: [],
  // 地下水库参数
  paramsFourth: [],
  activeNameThird: 'first'
})
// 参数方案id,,断面id
const handleOpenParams = (modelParams, blkcd, data) => {
  state.dialogVisible = true
  state.paramsName = data.paramsName
  acceptParams(data.paramsId)
  // 获取单元编码
  // getSkbyCalUnits({ blkcd: blkcd, mid: 1 }).then((res) => {
  //   if (res.code == 200) {
  //     state.inUnitInfos = res.data
  //     if (state.inUnitInfos.length > 0) {
  //       // 默认首先选中第一个单元编码
  //       handleClicModelPara(state.inUnitInfos[0], 0)
  //     }
  //   }
  // })
}
defineExpose({ handleOpenParams })

// 点击单元编码
// const handleClicModelPara = (item, index) => {
//   state.showModelParaIndex = index
//   getSkbyParams({ uid: item.id }).then((res) => {
//     if (res.code === 200) {
//       state.paramsName = res.data.pmName
//       acceptParams(res.data?.id)
//     }
//   })
// }
// 获取参数
const acceptParams = (id) => {
  // 查看时空变源-流域参数
  getParamsWata({ pmid: id }).then((res) => {
    if (res.code == 200) {
      state.paramsFirst = res.data
    }
  })
  // 查看时空变源-河道参数
  getParamsRiver({ pmid: id }).then((res) => {
    if (res.code == 200) {
      state.paramsSecond = res.data
    }
  })
  // 查看时空变源-运动波参数
  getParamsNofpl({ pmid: id }).then((res) => {
    if (res.code == 200) {
      state.paramsThird = res.data
    }
  })
  // 查看时空变源-地下水库参数
  getParamsNgw({ pmid: id }).then((res) => {
    if (res.code == 200) {
      state.paramsFourth = res.data
    }
  })
}
const dialogBeforeClose = () => {
  state.dialogVisible = false
}
</script>
<style lang="less" scoped>
:deep(.el-tabs) {
  height: 100%;
  .el-tabs__content {
    height: calc(100% - 55px);
    padding: 10px;
    .el-tab-pane {
      // height: 100%;
      height: 100%;
    }
  }
}
.bottom {
  display: flex;
  // height: 100%;
  height: 300px;
}
// .bianhao {
//   width: 200px;
//   height: 100%;
//   background-color: #fff;
//   // margin-left: 20px;
//   .tit {
//     height: 30px;
//     background-color: #f2f2f2;
//     text-align: center;
//     line-height: 30px;
//     width: 200px;
//     position: sticky;
//     top: 0px;
//   }
//   .list {
//     height: calc(100% - 30px);
//     overflow-x: hidden;
//     overflow-y: auto;
//     background: #d7d4d427;
//     .list-item {
//       display: flex;
//       align-items: center;
//       justify-content: space-between;
//       margin: 0 10px;
//       cursor: pointer;
//       div {
//         overflow: hidden; /*超出部分隐藏*/
//         text-overflow: ellipsis; /* 超出部分显示省略号 */
//         white-space: nowrap; /*规定段落中的文本不进行换行 */
//         width: 100%; /*需要配合宽度来使用*/
//       }

//       &.active {
//         background-color: #f2f2f2;
//         color: #0054db;
//       }
//     }
//   }
// }
.table {
  margin: 0 10px;
  width: 100%;
  background-color: #fff;

  .btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
  }

  .table-tb {
    width: 100%;
    height: calc(100% - 50px);
    margin-top: 10px;
  }
  .page {
    display: flex;
    margin-top: 20px;
    justify-content: flex-end;
  }
}
</style>
